<h3>{{ header }}</h3>
<el-form v-if="items.length > 0" dis class="mx-auto" style="height: calc(100% - 50px);" @drop="drop($event)"
    class="WorkflowDesignerWindowForm">
    <div v-for="(item, index) in items">
        <div v-if="item.Header" style="margin-top: 20px;margin-bottom: 5px;">
            <b>{{ item.Header }}</b>
        </div>
        <div v-if="item.Title" :draggable="item.IsEnable" style="cursor:grab;" @dragstart="dragstart(item, $event)" @dragend="dragend($event)" @drop="drop($event)">      
            <el-card body-style="padding:15px;">
                <el-tooltip :disabled="item.IsEnable" :content="WorkflowDesignerConstants.LibraryLabel.PluginRequired + ' ' + item.Plugins">
                <div v-bind:class="{disabledCard: !item.IsEnable }">
                    <b> {{ item.Title }}</b>
                    <div v-if="item.Description" style="margin-top:10px;">
                        {{ item.Description }}</div>               
                </div>
            </el-tooltip>
            </el-card>
        </div>
    </div>
</el-form>
<script type="application/javascript">
    function library_Init(me)
    {
        me.VueConfig.data = Object.assign(me.VueConfig.data, {
            header: WorkflowDesignerConstants.ToolbarLabel.Library,
            items: [],
            loading: true,
            folder: me.graph.Settings.templatefolder
        });

        me.VueConfig.methods.ValidateItems = function(items)
        {          
            var plugins = me.graph.designer.getpluginsnames();
            items.filter(function(item){ return !item.hasOwnProperty("Header");}).forEach(function(item) 
                {
                    if((item.Plugins==undefined)||(item.Plugins.lenght<1))
                    {
                        item.IsEnable = true;
                        return;
                    }
                    item.IsEnable = true;
                    
                    item.Plugins.split( "," ).forEach(function(element) 
                    {
                        item.IsEnable= item.IsEnable&&plugins.includes(element.trim());
                    });
                });
                return items;
        };

        var libraryUrl = me.VueConfig.data.folder + "library.json";
        $.ajax({url: libraryUrl, async: true}).done(function(result) 
        {
            me.VueConfig.data.items = me.VueConfig.methods.ValidateItems(result);
            me.VueConfig.data.loading = false;
        });


        me.VueConfig.methods.onUpdate = function(){
           
        };

        me.VueConfig.methods.onSearch = function(){ 
            me.VueConfig.watch.options.handler();
        };

        me.VueConfig.methods.insertScheme = function(item, e){
            var loadingSpinner = $("<div class='WorkflowDesignerWindowLoaderOverlay Compact'><div class='cv-spinner'><span class='spinner'></span></div></div>")
            $("body").append(loadingSpinner);
            loadingSpinner.css('left',e.pageX + 'px');          
            loadingSpinner.css('top',e.pageY + 'px');
            loadingSpinner.show();

            var offset = me.parentContainer.offset();
            var pos = {
                x: e.pageX - offset.left, 
                y: e.pageY - offset.top
            };
            $.ajax({
                url: me.VueConfig.data.folder + item.File, 
                dataType: 'text'
            }).done(function(result) {
                me.graph.insertScheme(result, pos, function () { loadingSpinner.remove() });                               
            });
        }

        me.VueConfig.methods.dragstart = function(item, e) {
            this.draggingItem = item;
            this.targetStyle = e.target.style;
            this.targetStyle.opacity = 0.6;

            try {
                e.originalEvent.dataTransfer.setData('text/plain', 'anything'); //hack for drag&drop in FF
            } catch (e) {}
            me.parentContainer.on("dragover.library", function(e){ e.preventDefault(); });
        };

        me.VueConfig.methods.dragend = function(e) 
        {
            this.targetStyle.opacity = 1;
            me.parentContainer.off("dragover.library");
            
            if(this.draggingItem !== undefined)
           {                
                this.insertScheme(this.draggingItem, e);
                this.draggingItem = undefined;
            }
        };

        me.VueConfig.methods.drop = function(e) {
            this.draggingItem = undefined;
            this.targetStyle.opacity = 1;
            me.parentContainer.off("dragover.library");
        };

        me.VueConfig.watch = {
          options: {
              handler: function () {
                  var search = data.search;                  
                  data.items = WorkflowDesignerCommon.filter(data.originalItems, function(el){
                    var tmp = search.toLowerCase();
                    return (el.Title && el.Title.toLowerCase().indexOf(tmp) !== -1) || (el.Description && el.Description.toLowerCase().indexOf(tmp) !== -1);
                  }).sort(function(a,b){ a.Title > b.Title });      
              }
          },
      };
    };
</script>